<template>
    <div class="user-content">
        <div class="login-box">登录</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="账号" prop="userName">
                <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style lang="less" scoped type="text/less">
    .user-content{
        position: relative;
        z-index: 5;
        background-color: #ffffff;
        width: 400px;
        padding: 15px 30px;
        margin: 15px 0;
        .login-box{
            padding: 30px;
            text-align: center;
        }
    }

    @media screen and (max-width: 768px) {
        .user-content {
            width:80%;
        }
    }
</style>
<script>
    import { loginService } from "@/service/api";
    export default {
        data() {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            let validateUserName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'));
                }else{
                    callback();
                }
            };

            return {
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    age: '',
                    userName: ''
                },
                rules: {
                    userName: [
                        { validator: validateUserName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                let that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            _username: 'tony',
                            _passwd: '5f4dcc3b5aa765d61d8327deb882cf99'
                        };

                        loginService(params, true)
                            .then((response)=>{
                                let token = response && response.headers["x-xsrf-token"] ? response.headers["x-xsrf-token"] : '';
                                that.$store.dispatch('setToken',token);
                                that.$router.push({path: '/'});
                                console.log(token)
                            }).catch((response)=>{
                                that.$notify.error({
                                    title: '登录',
                                    message: '登录失败'
                                });
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    }
</script>
